<template>
    <el-row justify="center">
        <!--el-col 列： -->
        <!--  <el-col :span="16" :xs="0" class="content-left"></el-col> -->
        <el-col :span="8" :xs="24" class="content-right">
            <div class="loginContent">

                <div class="loginContentTop">
                    <div class="header">
                        <div class="logo">
                            <img src="../assets/images/logo.png" alt="" class="image" />
                        </div>
                        <div class="fontSize">kunge2013</div>
                    </div>
                    <span class="introduce">登录demo</span>
                </div>

                <div class="loginContentForm">
                    <div class="loginMethods">
                        <el-tabs>
                            <el-tab-pane label="账号密码登录" class="toLogin" :class="{ option: !option }"
                                @click="toOption(0)">
                                <!-- loginForm: 表单数据对象-->
                                <el-form :model="loginForm" :rules="loginFormRules" style="width: 208px">
                                    <el-form-item label="" prop="username">
                                        <el-input :prefix-icon="User" placeholder="用户名:user"
                                            v-model="loginForm.username" inline-message></el-input>
                                    </el-form-item>
                                    <el-form-item label="" prop="password">
                                        <el-input :prefix-icon="Lock" placeholder="密码:user" show-password
                                            v-model="loginForm.password" inline-message></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="手机号码登录" class="toLogin" :class="{ option: !option }"
                                @click="toOption(0)">
                                <!-- loginForm: 表单数据对象-->
                                <el-form :model="loginFormPhone" :rules="loginFormPhoneRules" style="width: 208px"
                                    prop="phone">
                                    <el-form-item label="">
                                        <el-input :prefix-icon="User" placeholder="请输入手机号"
                                            v-model="loginFormPhone.phone" inline-message></el-input>
                                    </el-form-item>
                                    <el-form-item label="" prop="code">
                                        <el-input :prefix-icon="Lock" placeholder="请输入验证码" v-model="loginFormPhone.code"
                                            inline-message></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div class="loginContentButton">
                    <div class="buttonTop">
                        <el-checkbox v-model="checked" label="自动登录" size="small" />

                        <el-link type="primary" :underline="false" class="forgetPassword">
                            <span style="font-size: 12px;margin-left: 10px;">忘记密码</span>
                        </el-link>
                    </div>
                    <el-button type="primary" class="loginButton" @click="tologin">
                        登录
                    </el-button>
                    <el-divider>
                        <span class="fengexian">其他登录方式</span>
                    </el-divider>
                    <div class="svgItems">
                        <div class="svgItem">
                            <svg-icon name="zhifubao" width="18px" height="18px" color="pink"></svg-icon>
                        </div>
                        <div class="svgItem">
                            <svg-icon name="taobao" width="18px" height="18px" color="pink"></svg-icon>
                        </div>
                        <div class="svgItem">
                            <svg-icon name="weibo" width="18px" height="18px" color="pink"></svg-icon>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            option: true,
            checked: false,
            loginForm: {
                username: "user",
                password: "123456",
            },
            loginFormRules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }]

            },
            loginFormPhone: {
                phone: "123456",
                code: ""
            },
        }
    }
}
</script>

<style scoped>
.buttonTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loginContentTop {
    padding: 100px, 100px, 20px;
    margin-bottom: 10px;
    text-align: center;
}

/* .forgetPassword{
        float: right;
        font-size: 12px;
    } */
</style>